<template>
  <div class="contain">
    <div class="contain-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>患者统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contain-body">
      <div class="body-box" style="display: flex;align-items: center" >
        <div class="box-left" id="mainone"></div>
        <div style="width: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <div style="margin-top: 10px;display: flex;align-items: center;color: #666" v-for="(item,index) in dataOne" :key="index" v-show="item.scale">
            <div style="width: 8px;height: 8px;background-color: #1890ff;border-radius: 50%;margin-right: 10px"></div>
<!--            {{item.name}} -{{item.scale*100}}% -{{item.value}}-->
            <span style="margin-right: 10px">{{item.name}}</span> |
            <span style="margin-left: 10px">{{item.scale*100}}%</span>
              &nbsp;
              &nbsp;
              &nbsp;
              &nbsp;
              &nbsp;
              &nbsp;
            <span>{{item.value}}</span>
          </div>
        </div>
      </div>
      <div class="body-box" id="maintwo"></div>
      <div class="body-box" id="mainthree"></div>
      <div class="body-box" id="mainfour"></div>
      <div class="body-box" id="mainfive"></div>
      <div class="body-box">
        <div class="box-left" id="mainsix"></div>
        <div class="box-left" id="mainseven"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      dataOne: [],  //患者年龄统计
      dataTwo: {
        nameList: [],
        valueList: []
      }, //不同疾病种类患者数量
      dataThree: {
        nameList: [],
        valueList: []
      }, //不同省份患者数量
      dataFour: {
        nameList: [],
        valueList: []
      }, //同一患者问诊次数
      dataFive: {
        nameList: [],
        valueList: []
      },//月份患者统计
      dataSix: {
        nameList: [],
        valueList: []
      },//年份患者统计
      dataSeven: {
        nameList: [],
        valueList: []
      },//季度患者统计
    }
  },
  mounted() {
    this.findPatientStatistics()
    this.findPatientNumByIllnessType()
    this.findPatientNumByProvince()
    this.findInterrogationNumByPatient()
    this.findInterrogationNumByMonth()
    this.findInterrogationNumByYear()
    this.findInterrogationNumBySeason()
  },
  methods: {
    //查询患者年龄统计
    findPatientStatistics() {
      this.axios.post('/admin-data-statistics/findPatientStatistics').then(res => {
        if (res.data.code === 200) {
          this.dataOne = res.data.data
        }
      }).finally(() => {
        this.initMainone()
      })
    },
    //查询不同疾病种类患者数量
    findPatientNumByIllnessType() {
      this.axios.post('/admin-data-statistics/findPatientNumByIllnessType').then(res => {
        if (res.data.code === 200) {
          this.dataTwo = res.data.data
        }
      }).finally(() => {
        this.initMaintwo()
      })
    },
    //查询不同省份患者数量
    findPatientNumByProvince() {
      this.axios.post('/admin-data-statistics/findPatientNumByProvince').then(res => {
        if (res.data.code === 200) {
          this.dataThree = res.data.data
        }
      }).finally(() => {
        this.initMainthree()
      })
    },
    //查询同一患者问诊次数
    findInterrogationNumByPatient() {
      this.axios.post('/admin-data-statistics/findInterrogationNumByPatient').then(res => {
        if (res.data.code === 200) {
          this.dataFour = res.data.data
        }
      }).finally(() => {
        this.initMainfour()
      })
    },
    //查询月份患者统计
    findInterrogationNumByMonth() {
      this.axios.post('/admin-data-statistics/findInterrogationNumByMonth').then(res => {
        if (res.data.code === 200) {
          this.dataFive = res.data.data
        }
      }).finally(() => {
        this.initMainfive()
      })
    },
    //查询年份患者统计
    findInterrogationNumByYear() {
      this.axios.post('/admin-data-statistics/findInterrogationNumByYear').then(res => {
        if (res.data.code === 200) {
          this.dataSix = res.data.data
        }
      }).finally(() => {
        this.initMainsix()
      })
    },
    //查询季度患者统计
    findInterrogationNumBySeason() {
      this.axios.post('/admin-data-statistics/findInterrogationNumBySeason').then(res => {
        if (res.data.code === 200) {
          this.dataSeven = res.data.data
        }
      }).finally(() => {
        this.initMainseven()
      })
    },
    initMainone() {
      const option = {
        title: {
          text: '患者年龄统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //   right: 50,
        //   top:100,
        //   orient: 'vertical',
        //   data: ['0岁~1岁', '2岁~3岁', '4岁~5岁', '6岁~7岁', '8岁~9岁', '10岁~11岁','11岁以上']
        // },
        series: [
          {
            name: '患者年龄统计',
            type: 'pie',
            avoidLabelOverlap: false,
            radius:'55%',
            center:['50%','50%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.dataOne
          }
        ]
      };

      const myChart = echarts.init(document.getElementById('mainone'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initMaintwo() {
      const option = {
        title: {
          text: '不同疾病种类患者数量统计',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataTwo.nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#38a0ff'
              }
            },
            data: this.dataTwo.valueList
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('maintwo'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initMainthree() {
      const option = {
        title: {
          text: '每个区域(省)患者数量统计',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataThree.nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],

        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#38a0ff'
              }
            },
            data: this.dataThree.valueList
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mainthree'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initMainfour() {
      const option = {
        title: {
          text: '同一患者问诊次数统计',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'value',

        },
        yAxis: {
          type: 'category',
          data: this.dataFour.nameList
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#38a0ff'
              }
            },
            data: this.dataFour.valueList
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mainfour'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initMainfive() {
      const option = {
        title: {
          text: '月份患者数量统计',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataFive.nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],

        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#38a0ff'
              }
            },
            data: this.dataFive.valueList
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mainfive'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initMainsix() {
      const option = {
        title: {
          text: '年度患者数量',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'value',

        },
        yAxis: {
          type: 'category',
          data: this.dataSix.nameList
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#38a0ff'
              }
            },
            data: this.dataSix.valueList
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mainsix'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initMainseven() {
      const option = {
        title: {
          text: '季度患者数量',
          left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataSeven.nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],

        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#38a0ff'
              }
            },
            data: this.dataSeven.valueList
          }
        ]
      };
      const myChart = echarts.init(document.getElementById('mainseven'))// 图标初始化
      myChart.setOption(option)// 渲染页面
      //  随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  }
}
</script>

<style scoped lang="less">
.contain {
  width: 100%;
  height: 100%;

  .contain-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
  }

  .contain-body {
    width: 100%;
    height: calc(100% - 50px);
    background-color: #f2f2f2;
    padding: 1%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: auto;
    .body-box {
      width: 49.5%;
      height: 50%;
      box-sizing: border-box;
      margin-bottom: 1%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .box-left {
        width: 49%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
